/**
 * @fileOverview Show interface and handle events of tools panel where user can choose widget to drag and drop
 * @author Le Duc, Nam (lenam.k54@gmail.com)
 * @copyright VIT Coder group
 */
define([
    'backbone',
    'views/widget',
    'models/group-widget'
], function (
    Backbone,
    Widget,
    WidgetCollection
    ) {
    'use strict';

    var Tools = Backbone.View.extend({
        tagName: 'ul',
        initialize: function () {
            var header = $('<p>+ Buttons</p>').addClass('group-widgets');
            this.$el.append(header);
        },
        render: function () {
            var this_ = this;
            var div = $('<div></div>');
            _.each(this.collection.models, function (model) {
                var widgetRow = (new Widget({model: model})).$el.append('<p>Normal button</p>');
                $(this_.el).append(widgetRow);
            });
            return this_.el;
        }
    });

    return Backbone.View.extend({
        tagName: 'div',
        className: 'tools-bar',
        initialize: function () {
            /**
             * @description Append title of tools bar
             */
            var header = $('<p>Tools bar</p>').addClass('header');
            this.$el.append(header);
            /**
             * @description Load group widgets to tools bar
             */
            this.$el.append((new Tools({collection: new WidgetCollection()})).render());
        },
        render: function () {
            return this.el;
        }
    });
});
